<template>
    <z-paging ref="paging" v-model="list" @query="upCallback">
        <view class="container">
            <view v-for="(item, index) in list" :key="index" class="items">
                <view class="u-flex u-row-between">
                    <view class="time">
                        <text class="icon icon-time u-margin-right-20"></text>
                        {{ $u.$timeUtil.formatDate(item.date, 'yyyy/MM/dd') }}
                    </view>
                    <view class="uuid">{{ item.orderUuid }}</view>
                </view>
                <view class="content">
                    <view v-for="(subItem, idx) in item.content" :key="idx" class="u-flex u-row-between u-padding-20">
                        <view class="good-name u-line-1">{{ subItem.name }}</view>
                        <view class="amount u-line-1">共{{ subItem.count }}件</view>
                    </view>
                    <view class="u-flex u-row-between u-padding-20">
                        <view class="real-pay">
                            实付:
                            <text class="price">{{ Number(item.realPay).toFixed(2) }}</text>
                        </view>
                        <view>
                            共计
                            <text class="price">{{ item.total }}</text>
                            件
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

const id = ref('')
const paging = ref<any>(null)
const list = ref<Array<any>>([])

onLoad((option: any) => {
    id.value = JSON.parse(option.para).id
})

const $u = computed(() => {
    return uni.$u
})

const upCallback = (pageNo: number) => {
    uni.$u.$api.CreditApi.queryOrderRecordByID({ billId: id.value })
        .then((res: any) => {
            let mlist: Array<any> = []
            res.records.forEach((item: any) => {
                let content: Array<any> = []
                let total = 0
                item.mapOrderDetails.forEach((m: any) => {
                    content.push({
                        name: m.name,
                        count: m.num
                    })
                    total += m.num
                })
                mlist.push({
                    date: item.settlementBillOrder.orderDate,
                    orderUuid: item.settlementBillOrder.orderNo,
                    realPay: item.settlementBillOrder.orderAmount,
                    content,
                    total
                })
            })
            paging.value?.complete(mlist)
        })
        .catch(() => {
            paging.value?.complete(false)
        })
}
</script>

<style scoped lang="scss">
.container{
    padding: 20rpx;
}
.items {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    padding: 20rpx;
    .time {
        font-size: 28rpx;
        color: #999999;
        line-height: 60rpx;
    }
    .uuid {
        font-size: 28rpx;
        line-height: 60rpx;
    }
    .content {
        border-top: 1rpx solid #e5e5e5;

        line-height: 60rpx;
        .good-name {
            font-size: 28rpx;
            width: 500rpx;
            text-overflow: hidden;
        }
        .amount {
            font-size: 20rpx;
        }
        .real-pay {
            font-size: 28rpx;
        }
        .price {
            margin: 0 10rpx;
            font-size: 26rpx;
            color: #ff9900;
        }
    }
}
</style>
